<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制三次贝塞尔曲线</title>
    <style>
        canvas {border: thin solid orange;}
        body > * {float: left;}
    </style>
</head>
<body>
<div style="height: 300px;width: 300px">
    <canvas id="canvas" width="500" height="140" >
        Your browser doesn't support the <code>canvas</code> element
    </canvas>
</div>

<script type="application/javascript">
    var canvasElement = document.getElementById("canvas");
    var ctx = canvasElement.getContext("2d");
    var startPoint = [50,100];
    var endPoint = [400,100];
    var cp1 = [250,50];
    var cp2 = [350,50];

    canvasElement.onmousemove = function(e){
        if(e.shiftKey){
            cp1 = [e.clientX, e.clientY];
            console.log(e.clientX)
            console.log(e.clientY)
        }else if(e.ctrlKey){
            cp2 = [e.clientX, e.clientY];
        }
        ctx.clearRect(0,0,500,140);
        draw();
    }

    draw();
    function draw(){
        ctx.lineWidth = 5;
        ctx.strokeStyle = "BLUE";
        ctx.beginPath();
        ctx.moveTo(startPoint[0],startPoint[1]);
        ctx.bezierCurveTo(cp1[0],cp1[1],cp2[0],cp2[1],endPoint[0],endPoint[1]);
        ctx.stroke();

        ctx.lineWidth = 1;
        ctx.strokeStyle = "red";
        var points = [startPoint,endPoint,cp1,cp2];
        for(var i=0;i<points.length;i++){
            drawPoint(points[i]);
        }
        drawLine(startPoint,cp1);
        drawLine(endPoint,cp2);
    }
    function drawPoint(point){
        ctx.beginPath();
        ctx.strokeRect(point[0]-1,point[1]-2,4,4);
    }
    function drawLine(from,to){
        ctx.beginPath();
        ctx.moveTo(from[0],from[1]);
        ctx.lineTo(to[0],to[1]);
        ctx.stroke();
    }

</script>
</body>
</html>